<template>
  <el-dialog title="移动资源到目录" :visible.sync="visible" :before-close="closeDialogue" width="45%" append-to-body>
    <el-form :model="formData">
      <el-form-item label="选择目录：" :label-width='itemWidth'>
        <TreeSelect :data="cateSelectTreeData" :height="selectHeight"
            :defaultProps="defaultProps"
            :nodeKey="nodeKey" :checkedKeys="defaultCheckedKeys" ref="TreeSelectDialogue"
            @popoverHide="popoverHide"></TreeSelect>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取 消</el-button>
      <el-button type="primary" @click="add()" >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import TreeSelect from './tree-select.vue';
  export default {
    name: "InputDialog",
    components: { TreeSelect },
    data() {
      return {
        defaultProps: {
          children: 'childrenList',
          label: 'menuName'
        },
        nodeKey: 'menuId',
        defaultCheckedKeys: [],
        selectCateName:'',
        selectHeight:300,
        visible: false,
        result: '',
        itemWidth:'160px',
        inputWidth:'width:400px;',
        formData:{},
      }
    },
    props: {
      multipleSelection: {
        type: Array,
        default: [],
      },
      cateSelectTreeData:{
        type: Array,
        default: [],
      },
    },
    methods: {
      popoverHide (checkedIds, checkedData) {
        this.formData.cateId = checkedIds;
      },
      add(){
        this.multipleSelection.forEach(row=>{
          let param = JSON.parse(JSON.stringify(this.formData))
          param.id=row.id;
          this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseResource/updateResource", param)
            .then(() => {
              this.$emit('get-resource-data');
          })
        })
        this.closeDialogue();
      },
      cancel(){
        this.closeDialogue();
      },
      closeDialogue(){
        this.visible = false
        this.$refs.TreeSelectDialogue.selectedData = ""
      },
    },
  }
</script>

<style scoped>

</style>
